<template>
  <div class="book-table">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>图书列表</span>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="primary" 
          @click="handleAddBook"
        >
          添加图书
        </el-button>
      </div>
      
      <el-table 
        :data="books" 
        style="width: 100%"
        border
      >
        <el-table-column 
          prop="id" 
          label="ID" 
          width="80"
        ></el-table-column>
        <el-table-column 
          prop="title" 
          label="书名"
        ></el-table-column>
        <el-table-column 
          prop="author" 
          label="作者"
          width="180"
        ></el-table-column>
        <el-table-column 
          prop="copies" 
          label="库存"
          width="100"
        ></el-table-column>
        <el-table-column 
          label="操作" 
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-dialog
        title="添加图书"
        :visible.sync="addDialogVisible"
        width="40%"
      >
        <el-form 
          :model="newBook"
          ref="newBookForm"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="书名" prop="title">
            <el-input v-model="newBook.title"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="newBook.author"></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="copies">
            <el-input-number v-model="newBook.copies" :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdd">确定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      addDialogVisible: false,
      newBook: {
        id: '',
        title: '',
        author: '',
        copies: 1
      },
      rules: {
        title: [
          { required: true, message: '请输入书名', trigger: 'blur' },
          { min: 2, message: '书名长度至少为2个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' },
          { min: 2, message: '作者名长度至少为2个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAddBook() {
      this.resetForm();
      this.addDialogVisible = true;
    },
    handleDelete(id) {
      this.$emit('delete-book', id);
    },
    resetForm() {
      this.newBook = {
        id: Math.floor(Math.random() * 1000000) + 100000,
        title: '',
        author: '',
        copies: 1
      };
      this.$refs['newBookForm'] && this.$refs['newBookForm'].resetFields();
    },
    submitAdd() {
      this.$refs['newBookForm'].validate((valid) => {
        if (valid) {
          this.$emit('add-book', {...this.newBook});
          this.addDialogVisible = false;
          this.resetForm();
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.book-table {
  padding: 20px;
}
</style>